<template>
  <div>
    <div class="wrap">
      <div class="left">
        <ul class="class-item">
          <li class="flex-row all" :class="{'cur': params.groupId == ''}" @click="changeClass('')">
            未分组
            <el-tooltip class="item" effect="dark" content="右键下方分组可以修改和删除分组" placement="top-start">
              <el-button type="text" icon="el-icon-question"></el-button>
            </el-tooltip>
            <div class="btn flex-row-ver" @click.stop="openAddClass()">
              <i class="el-icon-circle-plus"></i>
            </div>
          </li>
          <li class="text-over" v-for="item in classList" :key="item.id"
              :class="{'cur': params.groupId == item.id}" @click="changeClass(item.id)"
              @contextmenu.prevent="setClass($event,item)">{{item.name}}
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="img-wrap">
          <div class="list" v-for="item in tableData" :key="item.id">
            <div class="img flex-row-ver" @click="choseImg($event,item.imgpath)">
              <img v-if="item.imgpath" :src="`http://image.jiaowawang.cn/${item.imgpath}`" />
              <div class="search" @click.stop="catBigImg(`http://image.jiaowawang.cn/${item.imgpath}`)"><i class="el-icon-zoom-in"></i></div>
            </div>
            <div class="del-wrap" v-if="isShowDelete">
              <el-checkbox v-model="deleteIds" :label="item.id"><div class="empty"></div></el-checkbox>
            </div>
            <div class="name text-over">{{item.name}}</div>
          </div>
          <div class="flex-row-ver add" @click="openUploadImg()">+</div>
        </div>
        <div class="pagination">
          <div class="left flex-row">
            <el-button type="primary" v-if="!isShowDelete" @click="startEditImg()">编辑图片</el-button>
            <el-button type="success" v-if="isShowDelete" @click="isShowDelete = false">取消编辑</el-button>
            <el-button type="primary" plain v-if="isShowDelete" @click="checkAll()">全选</el-button>
            <el-button type="primary" v-if="isShowDelete" @click="deleteImgs()">删除选中</el-button>
          </div>
          <el-pagination background :current-page.sync="currentPage1" :page-size="this.size"
            @current-change="handleIndexChange" layout="prev, pager, next" :total="tableTotal" />
        </div>
        <pt-table-loading v-show="isloadingTable" />
      </div>
    </div>

    <div class="right-click-wrap" @click.stop v-if="showClass"
         :style="{'left': left+'px', top: top+ 'px'}">
      <div class="center">
        <el-button type="text" @click="openAddClass(true)">修改此分类</el-button>
      </div>
      <div class="center">
        <el-button type="text" @click="deleteClass()">删除此分类</el-button>
      </div>
      <div class="center border-top">
        <el-button type="text"  @click="openAddClass()" style="color: #03a9f4;">新增分类</el-button>
      </div>
    </div>

    <el-dialog title="新增图片" v-dialogDrag :visible.sync="dialogTableVisibleImg" :modal="false" width="1000px">
      <pt-uploads ref="upload" class="update-list" style="padding-top: 10px"
                  :size="5" :limit="20" :multiple="true"
                  @getUploadList="getUpLoad" @deleteImage="deleteImg" />
      <span slot="footer" style="text-align: right;">
        <el-button @click="dialogTableVisibleImg = false">取 消</el-button>
        <el-button type="primary" v-loading="submitLoading" @click="submitUpload()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="(from.groupId ? '修改': '新增') + '分组'" v-dialogDrag :visible.sync="dialogTableVisible"
               :modal="false" width="380px" height="500px">
      <el-form :model="from" ref="ruleForm" label-position="top">
        <el-form-item label="分组名称:" prop="groupName" :rules="[{request: true,message: '分组名称未填', target: 'blur'}]">
          <el-input v-model="from.groupName" type="text" placeholder="请输入分组名称" />
        </el-form-item>
      </el-form>
      <span slot="footer" style="text-align: right;">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" v-loading="submitLoading" @click="resetForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>

    <div class="img-big-show flex-row-ver" v-if="dialogVisibleImg" @click="dialogVisibleImg = false">
      <img style="max-width: 100%" @click.stop :src="dialogImageUrl" />
      <i class="close el-icon-close" @click="dialogVisibleImg = false"></i>
    </div>
  </div>
</template>
<script>
  import * as api from '@/api/sc_other'
  export default {
    props: {
      busniessId: '',
      size: {
        type: Number,
        default: 20
      }
    },
    data() {
      return {
        dialogTableVisible: false, // 新增分类弹窗
        submitLoading: false,
        showClass: false, // 右键弹窗容器是否显示
        dialogTableVisibleImg: false, // 图片弹窗
        curRight: {}, // 右键的分组
        params: { // 查询数据列表
          groupId: '', // 分组id
          page: 0
        },
        currentPage1: 1, // 分页选择
        imageList: [], // 上傳時图片列表
        from: { // 新增修改
          groupId: '', // 分组id
          groupName: ''
        },
        isloadingTable: false, // 请求列表等待
        tableData: [], // 分页图片
        tableTotal: 0,
        classList: [], // 分组列表
        deleteIds: [], // 批量删除
        isShowDelete: false,
        dialogVisibleImg: false, // 查看大图
        dialogImageUrl: '', // 被查看的图片
        timeStamp: null
      }
    },
    methods: {
      openAddClass(row) { // 新增 、修改分组时打开弹窗
        if (row) {
          this.from.groupId = this.curRight.id
          this.from.groupName = this.curRight.name
        } else {
          this.from.groupId = ''
          this.from.groupName = ''
        }
        this.showClass = false
        this.dialogTableVisible = true
      },
      getPhotoClasslist() { // 相册分组列表
        api.albumSelect({ busniessId: this.busniessId }).then(res => {
          if (res.success) {
            this.classList = res.data
            this.getPhotolist()
          }
        })
      },
      handleIndexChange(current) { // 切换页码
        this.params.page = current - 1
        this.getPhotolist()
      },
      getPhotolist() { // 获取图片
        const params = { ...this.params }
        params.busniessId = this.busniessId
        params.size = this.size
        this.isloadingTable = true
        api.albumSelectImage(params).then(res => {
          if (res.success) {
            this.tableData = res.data.list || []
            this.tableTotal = res.data.total
          }
        }).finally(() => { this.isloadingTable = false })
      },
      setClass($el,row) { // 右键显示菜单
        this.left = $el.clientX
        this.top = $el.clientY
        this.curRight = row
        this.showClass = true
      },
      deleteClass() { // 删除分组
        this.showClass = false
        this.$confirm(`确认删除分组以及改分组所有图片？`,`删除【${this.curRight.name}】`).then(() => {
          this.albumDeleteGroup()
        }).catch(() => {})
      },
      albumDeleteGroup() { // 删除分组
        api.albumDeleteGroup({ groupId: this.curRight.id, busniessId: this.busniessId }).then(res => {
          if (res.success) {
            this.classList = res.data
          }
        })
      },
      changeClass(id) { // 切换分页
        this.params.groupId = id
        this.params.page = 0
        this.currentPage1 = 1
        this.getPhotolist()
      },
      openUploadImg() { // 打開上次圖片
        this.dialogTableVisibleImg = true
        this.$nextTick(() => {
          this.$refs.upload.clearFiles()
          this.imageList = []
        })
      },
      getUpLoad(imgs) { // 本地添加店内图片
        this.imageList.push({ name: imgs.name, url: `http://image.jiaowawang.cn/${imgs.url}`})
      },
      deleteImg(img) { // 本地删除店内图片
        const index = this.imageList.findIndex(item => {
          return `http://image.jiaowawang.cn/${img}` === `${item.url}`
        })
        if (index > -1) this.imageList.splice(index, 1)
      },
      submitUpload() { // 上传圖片
        this.submitLoading = true
        const params = {
          busniessId: this.busniessId,
          id: this.params.groupId,
          imagePaths: this.imageList.map(item => {
            return { name: item.name, url: item.url.split('http://image.jiaowawang.cn/')[1] }
          })
        }
        api.albumSaveImage(params).then(res => {
          if (res.success) {
            this.params.page = 0
            this.dialogTableVisibleImg = false
            this.getPhotolist()
          }
        }).finally(() => { this.submitLoading = false })
      },
      resetForm(formName) { // 新增修改分类
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitLoading = true
            const params = { ...this.from }
            if (this.from.groupId) {
              api.albumChangeGroupName({ id: params.groupId, name: params.groupName, busniessId: this.busniessId  }).then(res => {
                if (res.success) {
                  this.dialogTableVisible = false
                  this.classList = res.data
                }
              }).finally(() => { this.submitLoading = false })
            } else {
              api.albumSaveGroups({ groupName: this.from.groupName, busniessId: this.busniessId }).then(res => {
                if (res.success) {
                  this.dialogTableVisible = false
                  this.classList = res.data
                }
              }).finally(() => { this.submitLoading = false })
            }
          } else {
            return false
          }
        })
      },
      startEditImg() { // 开始编辑图片
        this.deleteIds = []
        this.isShowDelete = true
      },
      checkAll() { // 全选
        const arr = [...this.tableData.map(item => item.id), ...this.deleteIds]
        this.deleteIds = [...new Set(arr )]
      },
      deleteImgs() { // 删除图片
        api.albumDeleteImage({ ids: this.deleteIds, busniessId: this.busniessId }).then(res => {
          if (res.success) {
            this.params.page = 0
            this.currentPage1 = 1
            this.isShowDelete = false
            this.getPhotolist()
          }
        })
      },
      catBigImg(img) { // 查看大图
        this.dialogImageUrl = img
        this.dialogVisibleImg = true
      },
      choseImg($el,img) { // 选中图片
        if ($el.timeStamp - this.timeStamp < 300) return false
        this.timeStamp = $el.timeStamp
        this.$emit('choseImg', img)
      }
    },
    mounted() {
      this.getPhotoClasslist()
      document.addEventListener('click',e => {
        this.showClass = false
      },false)
    }
  }
</script>

<style lang="scss" scoped>
  .wrap{
    width: 100%;
    display: flex;
    .left{
      width: 160px;
      ul{
        background: #f5f5f5;
        li {
          width: 100%;
          height: 40px;
          padding:0 10px;
          line-height: 40px;
          box-sizing: border-box;
          cursor: pointer;
          &.cur{
            color: $--color-primary;
          }
          &.all{
            position: relative;
            .btn{
              position: absolute;
              right: 10px;
              height: 40px;
              text-align: center;
              i{
                color: #03a9f4;
                font-size: 20px;
              }
            }
          }
        }
      }
    }
    .right{
      position: relative;
      flex: 1;
      .img-wrap{
        display: flex;
        flex-flow: row wrap;
        min-height: 200px;
        padding-left: 20px;
        .list{
          position: relative;
          width: 100px;
          height: 120px;
          margin: 0 20px 20px 0;
          /deep/ .el-checkbox{
            position: relative;
            .el-checkbox__input{
              position: absolute;
            }
          }
          .del-wrap{
            position: absolute;
            width: 100px;
            height: 100px;
            z-index: 9;
            top: 1px;
            left: 1px;
            background: rgba(0,0,0,.3);
            .empty{
              width: 100px;
              height: 100px;
            }
          }
          .img{
            position: relative;
            width: 100px;
            height: 100px;
            border: 1px solid #DCDFE6;
            .search{
              position: absolute;
              right: 0;
              top: 0;
              width: 20px;
              height: 20px;
              text-align: center;
              line-height: 20px;
              background: rgba(0,0,0, .3);
              display: none;
              i{  color: #fff; }
            }
            &:hover .search{
              display: block;
            }
            img{
              max-width: 100%;
              max-height: 100%;
            }
          }
          .name{
            width: 100%;
            height: 20px;
            line-height: 20px;
          }
        }
        .add{
          width: 100px;
          height: 100px;
          border: 1px solid #DCDFE6;
          cursor: pointer;
          font-size: 48px;
          color: #999;
        }
      }
      .pagination{
        padding: 0 20px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  .right-click-wrap{
    position: fixed;
    width: 100px;
    z-index: 9999;
    padding: 10px 15px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px 0px #ccc;
    .center{
      line-height: 30px;
      text-align: center;
      &.border-top{
        border-top: 1px solid #ccc;
      }
    }
  }
  .img-big-show{
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0, .5);
    padding: 40px;
    box-sizing: border-box;
    .close{
      position: absolute;
      right: 40px;
      top: 40px;
      color: #fff;
      font-size: 48px;
      z-index: 999;
    }
  }
</style>
